<template>
  <div>
    <el-row :gutter="20" class="m-t-10">
      <el-col :span="6">
        <div class="chart_box">
          <Header title="共享资源数量-按投资规模/原值范围排名" />
          <Table
            width="85%"
            :header="header01"
            :list="list01"
            class="heightStyle"
          />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart_box">
          <RateNew :info="rate_info" />
          <div class="titleStyle">共享资源数量-按地域分布</div>
          <MapChart
            ref="mapChart"
            :basicOption="basicOption"
            :mapOptions="mapOptions"
            id="mapChart"
            class="heightStyleNew"
          />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="backStyle">
          <div class="chart_box">
            <Header title="共享资源数量-按资源类型统计" />
            <Chart id="chart_par" :message="optionsPar" class="heightStyle" />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="m-t-10">
      <el-col :span="6">
        <div class="chart_box">
          <Header title="共享资源数量-按学科领域统计" />

          <Chart id="chart_bar01" :message="optionsBar01" class="heightStyle" />
        </div>
      </el-col>
      <el-col :span="12">
        <!-- <Header title="共享资源数量-按大单位统计" /> -->
        <div class="chart_box">
          <!-- <div id="header12" class="p-l">共享资源数量-按大单位统计</div> -->
          <Header title="共享资源数量-按大单位统计" />
          <Chart id="chart_bar02" :message="optionsBar02" class="heightStyle" />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="chart_box">
          <Header title="共享资源数量-按管理单位统计" />

          <Chart id="chart_bar03" :message="optionsBar03" class="heightStyle" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Header from "./Header.vue";
import RateNew from "./RateNew.vue";
import Chart from "@/components/echart/charts.vue";
import Table from "./Table.vue";
import MapChart from "@/components/echart/MapChart.vue";
import * as echarts from "echarts";
export default {
  name: "SharedResources",
  components: {
    Header,
    RateNew,
    Chart,
    Table,
    MapChart,
  },
  data() {
    return {
      rate_info: {
        title: "共享资源总数",
        num: "19820",
        increase: "12",
        decrease: "12",
      },
      optionsPar: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          icon: "circle",
          orient: "vertical",
          left: "56%",
          top: "middle",
          formatter: function (name) {
            if (name === "科研设施") {
              return `{a|${name}}` + "{b|25%}";
            } else if (name === "仪器设备") {
              return `{a|${name}}` + "{b|20%}";
            } else {
              return `{a|${name}}` + "{b|55%}";
            }
          },
          textStyle: {
            color: "#000",
            rich: {
              a: {
                fontSize: 16,
                color: "#fff",
              },
              b: {
                fontSize: 16,
                color: "#fff",
                padding: [0, 7, 0, 7],
              },
            },
          },
        },
        series: [
          {
            left: "13%",
            width: 180,
            color: ["#ea7271", "#7bd69d", "#e9d868"],
            type: "pie",
            data: [
              { value: 72, name: "科研设施" },
              { value: 54, name: "仪器设备" },
              { value: 156, name: "软件系统" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: (list) => {
                  // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
                  var colorList = [
                    {
                      colorStart: "#FFF5B6",
                      colorEnd: "#DFC338",
                    },
                    {
                      colorStart: "#9AFEA5",
                      colorEnd: "#5AD8A6",
                    },
                    {
                      colorStart: "#96BAFF",
                      colorEnd: "#3260F0",
                    },
                    {
                      colorStart: "#FD9494",
                      colorEnd: "#ED5656",
                    },
                    {
                      colorStart: "#CC9AFE",
                      colorEnd: "#A455F2",
                    },
                  ];
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      //左、下、右、上
                      offset: 0,
                      color: colorList[list.dataIndex]["colorStart"],
                    },
                    {
                      offset: 1,
                      color: colorList[list.dataIndex]["colorEnd"],
                    },
                  ]);
                },
              },
            },
          },
        ],
      },
      optionsBar01: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          textStyle: {
            color: "#fff",
          },
          className: "LineChart-tooltip",
          extraCssText: `background-color: rgba(0, 21, 50, 0.8);
            color: #fff;
            border: 0.01rem solid #214D87;
            border-color: #214D87;
            box-shadow: 0px 0px 0.08rem 0px rgba(0, 0, 0, 0.3);
            border-radius: 0.04rem;`,
          formatter: function (params) {
            // console.log(params);
            var html = params[0].name + "<br/>";
            for (var i = 0; i < params.length; i++) {
              html +=
                params[i].marker +
                params[i].seriesName +
                "  " +
                params[i].value +
                "件" +
                "<br/>";
            }
            return html;
          },
        },
        grid: {
          left: "3%",
          right: "7%",
          top: "20%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          // name: "学科领域",
          type: "category",
          nameLocation: "end",
          nameTextStyle: {
            color: "#fff",
          },
          axisLabel: {
            color: "#fff",
            fontSize: 10,
          },
          data: [
            "材料学",
            "化学",
            "生物学",
            "基础医学",
            "环境科学",
            "药学",
            // "电子与通信技术",
            // "机械工作",
            // "地球科学",
            // "其他10类",
          ],
        },
        yAxis: {
          name: "资源数量",
          nameTextStyle: {
            color: "#6A84A3 ",
          },
          type: "value",
          axisLabel: {
            color: "#B5C5D4",
          },
          splitLine: {
            lineStyle: {
              color: "#204F8C",
              type: "dashed", //虚线
            },
            show: true, //隐藏
          },
        },
        series: [
          {
            name: "资源数量",
            color: ["#61a5e8"],
            data: [10, 23, 20, 5, 23, 12, 45, 21, 14, 8],
            type: "bar",
            itemStyle: {
              //本月阻拦请求次数的数据渐变色设置，本章重点部分
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#0044c3" }, //开始的颜色
                { offset: 1, color: "#43ddff" }, //结束的颜色
              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
            },
          },
        ],
      },
      optionsBar02: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          textStyle: {
            color: "#fff",
          },
          className: "LineChart-tooltip",
          extraCssText: `background-color: rgba(0, 21, 50, 0.8);
            color: #fff;
            border: 0.01rem solid #214D87;
            border-color: #214D87;
            box-shadow: 0px 0px 0.08rem 0px rgba(0, 0, 0, 0.3);
            border-radius: 0.04rem;`,
          formatter: function (params) {
            // console.log(params);
            var html = params[0].name + "<br/>";
            for (var i = 0; i < params.length; i++) {
              html +=
                params[i].marker +
                params[i].seriesName +
                "  " +
                params[i].value +
                "件" +
                "<br/>";
            }
            return html;
          },
        },
        grid: {
          left: "5%",
          right: "7%",
          top: "20%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          // name: "学科领域",
          type: "category",
          nameLocation: "end",
          axisLabel: {
            color: "#fff",
            fontSize: 10,
            formatter: function (value) {
              var texts = value;
              if (texts.length > 4) {
                // 限制长度自设
                texts = texts.substr(0, 4) + "...";
              }
              return texts;
            },
          },
          data: [
            "陆军研究院",
            "海军装备研究院",
            "空军装备研究院",
            "空军工程大学",
            "火箭军工程大学",
            "火箭军装备研究院",
            "军事科学院",
            "国防大学",
            "中国科学院",
          ],
        },
        yAxis: {
          // name: "资源数量",
          nameTextStyle: {
            color: "#6A84A3 ",
          },
          type: "value",
          axisLabel: {
            color: "#B5C5D4",
          },
          splitLine: {
            lineStyle: {
              color: "#204F8C",
              type: "dashed", //虚线
            },
            show: true, //隐藏
          },
        },
        series: [
          {
            name: "资源数量",
            markLine: {
              symbol: ["none", "none"], // 去掉箭头
              // label: {
              //   show: true,
              //   position: "end",
              //   formatter: "警戒线",
              //   color: "#FF1D00",
              // },
              data: [
                // {
                //   // name: "阈值",
                //   yAxis: 35,
                //   // label: {
                //   //   show: true,
                //   //   position: "end",
                //   //   formatter: "警戒线",
                //   //   color: "#FF1D00",
                //   // },
                // },
                // {
                //   // name: "阈值",
                //   yAxis: 35,
                //   label: {
                //     show: true,
                //     position: "start",
                //     formatter: "35",
                //     color: "#FF1D00",
                //   },
                // },
              ],
              lineStyle: {
                type: "solid",
                color: "#FF1D00",
                width: 1,
              },
            },
            itemStyle: {
              //本月阻拦请求次数的数据渐变色设置，本章重点部分
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#96BAFF" }, //开始的颜色
                { offset: 1, color: "#3260F0" }, //结束的颜色
              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
            },

            data: [
              {
                value: 23,
              },
              {
                value: 20,
              },
              {
                value: 20,
              },
              {
                value: 13,
              },
              {
                value: 9,
              },
              {
                value: 45,
              },
              {
                value: 21,
              },
              {
                value: 14,
              },
              {
                value: 8,
              },
            ],
            type: "bar",
          },
        ],
      },
      optionsBar03: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          textStyle: {
            color: "#fff",
          },
          className: "LineChart-tooltip",
          extraCssText: `background-color: rgba(0, 21, 50, 0.8);
            color: #fff;
            border: 0.01rem solid #214D87;
            border-color: #214D87;
            box-shadow: 0px 0px 0.08rem 0px rgba(0, 0, 0, 0.3);
            border-radius: 0.04rem;`,
          formatter: function (params) {
            // console.log(params);
            var html = params[0].name + "<br/>";
            for (var i = 0; i < params.length; i++) {
              html +=
                params[i].marker +
                params[i].seriesName +
                "  " +
                params[i].value +
                "件" +
                "<br/>";
            }
            return html;
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          top: "20%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          // name: "学科领域",
          type: "category",
          nameLocation: "end",
          axisLabel: {
            color: "#fff",
            fontSize: 10,
            formatter: function (value) {
              var texts = value;
              if (texts.length > 4) {
                // 限制长度自设
                texts = texts.substr(0, 4) + "...";
              }
              return texts;
            },
          },
          data: [
            "01月",
            "02月",
            "03月",
            "04月",
            "05月",
            // "01/06",
            // "01/07",
            // "01/08",
            // "01/09",
            // "01/10",
            // "01/11",
            // "01/12",
            // "01/13",
            // "01/14",
            // "01/15",
            // "01/16",
            // "01/17",
          ],
        },
        yAxis: {
          // name: "资源数量",
          nameTextStyle: {
            color: "#6A84A3 ",
          },
          type: "value",
          axisLabel: {
            color: "#B5C5D4",
          },
          splitLine: {
            lineStyle: {
              color: "#204F8C",
              type: "dashed", //虚线
            },
            show: true, //隐藏
          },
        },
        series: [
          {
            name: "资源数量",
            color: ["#61a5e8"],
            data: [
              10, 20, 5, 23, 12, 45, 21, 14, 8, 12, 4, 6, 9, 8, 12, 15, 17,
            ],
            type: "bar",
            itemStyle: {
              //本月阻拦请求次数的数据渐变色设置，本章重点部分
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#54C0FF" }, //开始的颜色
                { offset: 1, color: "#0B65D9" }, //结束的颜色
              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
            },
          },
        ],
      },
      header01: [
        {
          colName: "rank",
          name: "名次",
          width: "20%",
        },
        {
          colName: "resourceName",
          name: "资源名称",
          width: "30%",
        },
        {
          colName: "range",
          name: "投资规模/原值范围（万元）",
          width: "50%",
        },
      ],
      list01: [
        {
          rank: 1,
          resourceName: "脑科学与智能技术交叉平台",
          range: 1157.6,
        },
        {
          rank: 2,
          resourceName: "国家基因组学研究中心",
          range: 1072.4,
        },
        {
          rank: 3,
          resourceName: "先进材料研究中心",
          range: 926.5,
        },
        {
          rank: 4,
          resourceName: "中国散列中子源（CSNS）",
          range: 904.2,
        },
        {
          rank: 5,
          resourceName: "SBI试验装置",
          range: 871.9,
        },
        {
          rank: 6,
          resourceName: "数字化扫描电子显微镜",
          range: 822.6,
        },
        {
          rank: 7,
          resourceName: "移动式快速生物侦检仪",
          range: 798.1,
        },
        {
          rank: 8,
          resourceName: "高纯锗γ能谱仪",
          range: 777.7,
        },
        {
          rank: 9,
          resourceName: "VOC洁净温湿度环境箱",
          range: 657.5,
        },
        {
          rank: 10,
          resourceName: "量子信息科学与技术实验室",
          range: 623.3,
        },
      ],
      header02: [
        {
          colName: "rank",
          name: "名次",
          width: "33%",
        },
        {
          colName: "address",
          name: "地址",
          width: "33%",
        },
        {
          colName: "num",
          name: "资源数量",
          width: "34%",
        },
      ],
      list02: [
        {
          rank: 1,
          address: "陕西",
          num: 1092,
        },
        {
          rank: 2,
          address: "北京",
          num: 1092,
        },
        {
          rank: 3,
          address: "上海",
          num: 1092,
        },
        {
          rank: 4,
          address: "陕西",
          num: 1092,
        },
        {
          rank: 5,
          address: "北京",
          num: 1092,
        },
        {
          rank: 6,
          address: "上海",
          num: 1092,
        },
        {
          rank: 7,
          address: "陕西",
          num: 1092,
        },
        {
          rank: 8,
          address: "北京",
          num: 1092,
        },
        {
          rank: 9,
          address: "上海",
          num: 1092,
        },
        {
          rank: 10,
          address: "上海",
          num: 1092,
        },
      ],
      basicOption: {
        ref: "mapChart",
        // height: "360px",
        width: "100%",
      },
      mapOptions: {
        backgroundColor: "#001636",
        showTool: false,
        showVisualMap: false,
        series: [
          {
            name: "地图",
            type: "map",
            map: "china",
            roam: true,
            zoom: 1,
            label: {
              show: true,
              color: "#fff",
              formatter: () => {
                return "";
              },
            },
            emphasis: {
              label: { show: true },
              itemStyle: {
                borderWidth: 2,
                borderColor: "#fff",
                areaColor: "#1789FB",
              },
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "#228FFE",
              areaColor: "#29498C",
            },
            data: [
              {
                name: "北京",
                value: 1230,
              },
              {
                name: "黑龙江",
                value: 2300,
              },
              {
                name: "辽宁",
                value: 2230,
              },
              {
                name: "山西",
                value: 22,
              },
              {
                name: "浙江",
                value: 220,
              },
              {
                name: "海南",
                value: 10,
              },
              {
                name: "陕西",
                value: 8888,
              },
              {
                name: "江西",
                value: 49,
              },
              {
                name: "江苏",
                value: 7894,
              },
              {
                name: "新疆",
                value: 7,
              },
              {
                name: "宁夏",
                value: 11,
              },
              {
                name: "甘肃",
                value: 118,
              },
              {
                name: "西藏",
                value: 6,
              },
              {
                name: "云南",
                value: 225,
              },
              {
                name: "广西",
                value: 60,
              },
              {
                name: "广东",
                value: 6650,
              },
              {
                name: "重庆",
                value: 325,
              },
              {
                name: "贵州",
                value: 70,
              },
              {
                name: "湖北",
                value: 20,
              },
              {
                name: "湖南",
                value: 820,
              },
              {
                name: "河北",
                value: 120,
              },
              {
                name: "河南",
                value: 920,
              },
              {
                name: "四川",
                value: 2990,
              },
              {
                name: "安徽",
                value: 1990,
              },
              {
                name: "福建",
                value: 790,
              },
              {
                name: "吉林",
                value: 220,
              },
              {
                name: "内蒙古",
                value: 266,
              },
              {
                name: "山东",
                value: 1790,
              },
              {
                name: "青海",
                value: 9,
              },
            ],
          },
        ],
      },
    };
  },
};
</script>

<style lang="less" scoped>
.heightStyle {
  height: calc(100% - 50px) !important;
}
.heightStyleNew {
  height: calc(100% - 77px) !important;
}
.chart_box {
  height: calc((100vh - 90px) / 2);
  overflow: auto;
}
#sharedResources {
  display: grid;
  grid-template-columns: 3fr 7fr;
  grid-template-rows: 0px 350px 450px 350px;
  grid-gap: 15px;
  & > div {
    background: linear-gradient(180deg, #061234 0%, #093964 100%);
  }
  .row_01 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    display: flex;
  }
  .row_02_col_01 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: #f2f2f2;

    display: flex;
    flex-direction: column;
    .chart_box {
      flex: 1;
    }
  }
  .row_02_col_02 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    .chart_box {
      flex: 1;
    }
  }
  .row_03_col_01 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    .table_box {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .row_03_col_02 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    .map_box {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .table_box {
        width: 35%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .title {
          color: #fff;
          margin-bottom: 10px;
        }
      }
    }
  }
  .row_04 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    display: flex;
    justify-content: space-around;
    & > div {
      width: 50%;
      background: linear-gradient(180deg, #061234 0%, #093964 100%);
      display: flex;
      flex-direction: column;
      .chart_box {
        flex: 1;
      }
    }
    .left {
      margin-right: 15px;
    }
  }
}
.titleStyle {
  color: #fff;
  margin-top: 15px;
  font-size: 20px;
  font-weight: bold;
  background-image: linear-gradient(
    to bottom,
    #6292c8,
    #dbf2ff
  ); // 背景线性渐变
  color: #ffffff; // 兜底颜色，防止文字裁剪不生效
  background-clip: text;
  -webkit-background-clip: text; // 背景被裁减为文字的前景色
  -webkit-text-fill-color: transparent; // 文字填充为透明，优先级比color高。
}
.backStyle {
  background: linear-gradient(180deg, #061234 0%, #093964 100%);
}
#header12 {
  width: 100%;
  height: 50px;
  display: inline-block;
  background: url("~@/assets/img/bigBack.png");
  background-size: contain;
  background-repeat: no-repeat;
  line-height: 50px;
  font-weight: bold;
  color: #fff;
  padding-left: 80px;
}
</style>
